<template>
	<view class="main">
		<image class="back-img " src="https://qny.yijiumy.com/ydd/hongdong_back.jpg" mode=""></image>

		<view class="lamp">
			<view class="lamp-box1">
				<view class="">

				</view>
				<view class="">

				</view>
				<view class="">

				</view>
				<view class="">

				</view>
				<view class="">

				</view>
				<view class="">

				</view>
				<view class="">

				</view>
			</view>
			<view class="lamp-box2">
				<view class="">

				</view>
				<view class="">

				</view>
				<view class="">

				</view>
				<view class="">

				</view>
				<view class="">

				</view>
				<view class="">

				</view>
				<view class="">

				</view>
			</view>
		</view>

		<view class="link">
			<u--text decoration='underline' @click="goRecords()" text="中奖记录" color="#000000"></u--text>
		</view>

		<u-overlay :show="isShow" duration="0" zIndex="1">
			<view v-if="!isPrize" class="warp">
				<view style="width: 520rpx;">
					<u-line-progress :percentage="percentage" height="8"></u-line-progress>
				</view>
				<view style="color: #fff; font-size: 14px;">
					正在拆开礼盒
				</view>
			</view>

			<view v-if="isPrize">
				<view class="pic-back box2">
					<!-- 抽中实物 -->
					<view v-if="data.prizeType==1">
						<image src="https://qny.yijiumy.com/pic_zjbj_an.png" @click="close"
							style='width: 50rpx;height: 50rpx;position: absolute;right: 30rpx;top: 125rpx;z-index: 100000;' mode="">
						</image>
						<image style="height: 1150rpx;width: 100%;"
							src="https://qny.yijiumy.com/ydd/pic_zhongjiangbeij.png" mode=""></image>

						<view class="prize-box" style="height: 700rpx; top: 400rpx;">
							<view class="prize-name">
								奖品:{{data.prizeName}}
							</view>
							<view class="prize-img">
								<image :src="data.prizeImage" mode=""></image>
							</view>
							<view class="address">
								<view style="line-height: 70rpx;">
									请选择收获地址
								</view>
								<view class="border-box" @click="addressTap">
									<image v-if="!addressInfo.id" class="push" src="https://qny.yijiumy.com/push.png"
										mode=""></image>
									<view v-if="addressInfo.id">
										<view class="address-details">
											<view class="addressInfo">
												{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}
											</view>
											<view class="realName">
												{{addressInfo.realName}}
											</view>
											<view class="phone">
												{{addressInfo.phone}}
											</view>
										</view>
										<view class="font">
											{{addressInfo.detail}}
										</view>
										<view class="font">
											门牌号：{{addressInfo.houseNumber}}
										</view>
									</view>
								</view>
							</view>
							<view class="once">
								<view class="img">
									<img src="https://qny.yijiumy.com/ydd/pic_ljlq.png" alt="" />
								</view>

								<text @click="receive">立即领取</text>

							</view>
						</view>
					</view>
					<!-- 抽中优惠券或零钱 -->
					<view v-if="data.prizeType==2||data.prizeType==3"
						style="position: absolute;width: 100%;top: 150rpx;">
						<image src="https://qny.yijiumy.com/pic_zjbj_an.png" @click="close"
							style='width: 50rpx;height: 50rpx;position: absolute;right: 30rpx;top: 125rpx;' mode="">
						</image>
						<image style="height: 845.41rpx;width: 100%;"
							src="https://qny.yijiumy.com/ydd/pic_zhongjiangbeij_n.png" mode=""></image>
						<view class="prize-box" v-if="data.prizeType==2" style="height: 700rpx; top: 400rpx;">
							<view class="coupon">
								<view class="coupon-box">
									<view class="text">
										—{{data.yxStoreCoupon.cname}}—
									</view>
									<view class="coupon-numder">
										{{data.yxStoreCoupon.couponPrice}} 元
									</view>
									<view class="type"
										:style="{'text-decoration': !data.yxStoreCoupon.ctype ? 'none' : 'underline'}">
										{{!data.yxStoreCoupon.ctype ? '平台通用券' : '指定商品券'}}
									</view>

								</view>
								<image src="https://qny.yijiumy.com/ydd/pic_YHJ_h.png" mode=""></image>
							</view>

							<view class="once">
								<view class="img">
									<img src="https://qny.yijiumy.com/pic_ljlq.png" alt="" />
								</view>

								<text @click="receive">立即领取</text>

							</view>
						</view>
						<view class="prize-box" v-if="data.prizeType==3" style="height: 700rpx; top: 400rpx;">
							<view class="hongbao">
								<view class="hongbao-numder">
									{{data.prizePrice}} 元
								</view>
								<image src="https://qny.yijiumy.com/ydd/pic_hongbao.png" mode=""></image>
							</view>

							<view class="once">
								<view class="img">
									<img src="https://qny.yijiumy.com/pic_ljlq.png" alt="" />
								</view>

								<text @click="receive">立即领取</text>

							</view>
						</view>
					</view>
					<view v-if="!data.prizeType" style="position: absolute;width: 100%;top: 150rpx;">
						<image src="https://qny.yijiumy.com/ydd/pic_zjbj_an.png" @click="close"
							style='width: 50rpx;height: 50rpx;position: absolute;right: 30rpx;top: 125rpx;' mode="">
						</image>
						<image style="height: 845.41rpx;width: 100%;" src="https://qny.yijiumy.com/ydd/pic_xxcy.png"
							mode="">
						</image>
					</view>


				</view>

			</view>
		</u-overlay>

		<view class="box">
			<image src="https://qny.yijiumy.com/pic_kh.png" mode="" v-for="(item, index) in 9" :key="index"
				@click="btnBClick">
			</image>
		</view>
		<view class="numder">
			<text>目前剩余{{userInfo.drawsNumber}}次抽奖机会</text>
		</view>
		<!-- <view style="position: absolute;
		top: 1116rpx;
		font-size: 12px;
		text-align: center;
		width: 360rpx;
		margin-left: -180rpx;
		text-decoration: underline;
		left: 50%;" @click="showAd()">
			点击观看激励视频获抽奖次数
		</view> -->
		<!-- url-callback -->
		<!-- <ad-rewarded-video ref="rewardedVideo" style="position: absolute;
		top: 1116rpx;
		font-size: 12px;
		text-align: center;
		width: 360rpx;
		margin-left: -180rpx;
		text-decoration: underline;
		left: 50%;" adpid="1651330849" :loadnext="true" v-slot:default="{loading, error}"
			@load="onadload" @close="onadclose" @error="onaderror">
			<view :disabled="loading" :loading="loading">点击观看激励视频获抽奖次数</view>
			<view v-if="error">{{error}}</view>
		</ad-rewarded-video> -->
		<view class="seamless-box">
			 <!-- #ifdef MP-WEIXIN -->
			<button open-type="share" class="btn">
				<view class="btn-text">
					分享用户注册可得抽奖机会
				</view>
			</button>
			 <!-- #endif -->
			 <!-- #ifdef APP-PLUS -->
			 <button class="btn" @click="shareApp">
			 	<view class="btn-text">
			 		分享用户注册可得抽奖机会
			 	</view>
			 </button>
			 <!-- #endif -->
			<seamless :list='userSignList' ref="seamless" :data="seamData"></seamless>
		</view>

		<view class="title-box">
			<view class="rule" style="padding-bottom: 100rpx;">
				<view class="rule-title">
					盲盒抽奖规则
				</view>
				<view class="rule-list">
					<view>一、参与条件:</view>
					<view>1.用户需通过亿久生活 + 平台完成注册并登录买指定商品或服务</view>
					<view>2.用户抽取结束后想要再次参与需要分享获得额外抽奖次数</view>
					<view>3.每位用户每天可参与多次盲盒抽奖</view>
				</view>
				<view class="rule-list">
					<view>二、抽奖方式:</view>
					<view>1.用户通过购买指定商品或服劳获得抽奖机会</view>
					<view>2.抽奖机会将以“盲盒抽奖活动”的形式让用户参与，用户可在指定页面进行抽奖</view>
					<view>3.每次抽奖，用户可自行点击任意一个盲盒</view>
				</view>
				<view class="rule-list">
					<view>三、盲盘奖励:</view>
					<view>1.中奖几率: 100%，用户参与即可中奖</view>
					<view>2.中奖奖品: 茅台酒带条码1箱、iphone15、HUAWEI Mate 60、商城进口酒水、零食或持定商品，优惠券等，具体以实际抽取奖励为主</view>
				</view>
				<view class="rule-list">
					<view>四、盲盒兑换与发放：</view>
					<view>1.用户在获得盲盒奖品后，可进入“我的奖品”页面查看盲盒详情及兑换规则</view>
					<view>2.用户需在规定时间内兑换盲盒内的奖品，逾期将无法兑换，优惠券形式的奖品直接发放到用户优惠券页面里，按照优惠券规则适用</view>
					<view>3.实物奖品用户填写邮寄地址后由平台安排进行配送，相关实物奖品和物流等，具体以盲盒内说明为准</view>
				</view>
				<view class="rule-list">
					<view>五、抽奖规则：</view>
					<view>1.本活动最终解释权归广东亿久贸易有限公司所有</view>
					<view>2.公司有权对活动中奖品根据实际情况进行调整</view>
					<view>3.如有任何疑问或需要帮助，请联系公司客服</view>
					<view>4.在此活动中Apple不是赞助者，也没有以任何形式参与活动，奖品由本公司提供，与Apple无关。</view>
				</view>
			</view>
		</view>
		<AddressWindow @checked="changeAddress" @redirect="addressRedirect" v-model="showAddress"
			:checked="addressInfo.id" ref="mychild"></AddressWindow>
		<!-- <ad-rewarded-video ref="rewardedVideo" adpid="1651330849" :url-callback="urlCallback" :disabled="true" :preload="false" :loadnext="false"
		v-slot:default="{loading, error}" @close="onadRewardedClose" @load="onadRewardedLoad"></ad-rewarded-video> -->
	</view>
</template>

<script>
	import seamless from "@/components/seamless";
	import {
		mapGetters,
	} from "vuex";
	import AddressWindow from "@/components/AddressWindow";
	import {
		prizedraw,
		reward,
		getWinningNotification
	} from "@/api/business"
	export default {
		name: "BusinessCard",
		components: {
			seamless,
			AddressWindow
		},
		computed: mapGetters(["userInfo"]),
		data() {
			return {
				urlCallback: {
					userId: '',
					extra: ''
				},
				percentage: 0,
				isShow: false,
				addressInfo: {},
				showAddress: false,
				data: {},

				isPrize: false,
				seamData: {
					image: 'https://qny.yijiumy.com/lottery.png',
					type: 2
				},
				userSignList: []
			}
		},

		onHide() {
			this.$refs.seamless.clear()
		},
		mounted() {
			this.$refs.seamless.Interval()
			// #ifdef MP-WEIXIN 
			uni.showShareMenu({
				withShareTicket: true,
				title: `号外！号外！亿久生活上线啦~`, // 分享标题
				content: ``, // 分享内容
				imageUrl: `https://qny.yijiumy.com/ydd/20240328191610.png`, // 分享图标
				path: `/pages/Loading/index?scene=${this.userInfo.uid}`, // 路径
				success: res => {
					// 分享成功回调
				}
			})
			  // #endif
		
		},
		async onLoad() {
			this.getUserList()
			
			console.log(">>>>>>>>>>>>>>")
			// #ifdef MP-WEIXIN
			// 调用自有服务、云函数进行微信登录或以其他方式获取 openid
			// 通过调用 uni.login(), 获取 code，然后在服务器上请求微信服务器换取 openid, 获取的 code 只能使用一次
			 // const res = await uniCloud.initSecureNetworkByWeixin({
				// // openid: this.userInfo.openId
			 // })
			 // console.log(res)
			 // console.log("<<<<<<<<<<<<<<<")
			// #endif
		},

		methods: {
			shareApp(){
				uni.shareWithSystem({
					href: `path:/pages/Loading/index?scene=${this.userInfo.uid}`,
					summary: "号外！号外！亿久生活上线啦~",
					// summary: "",
					imageUrl: "https://qny.yijiumy.com/ydd/20240328191610.png",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			// showAd() {
			// 	this.$nextTick(()=>{
			// 		this.$refs.rewardedVideo.show()
			// 	})
			// },
			// onadRewardedLoad() {
			// 	console.log('激励视频广告数据加载成功');
			// },
			// onadRewardedClose(e) {
			// 	const detail = e.detail
			// 	// 用户点击了【关闭广告】按钮
			// 	if (detail && detail.isEnded) {
			// 		// 正常播放结束
			// 		// 这里应该联网给予用户激励。且这段代码应该做安全保护，详见下文中的“安全注意”
			// 		console.log("onadclose---正常播放结束 " + detail.isEnded);
			// 		//1猜对 奖励3-5倍  2 猜错复活  3 红包3-5倍
			// 		this.getadvideocallback()
			// 	} else {
			// 		console.log("onadclose--播放中途退出 " + detail.isEnded);
					
			// 	}
			// },
			// getadvideocallback() {},
			// onadload(e) {
			// 	console.log('广告数据加载成功');
			// },
			// onadclose(e) {
			// 	const detail = e.detail
			// 	// 用户点击了【关闭广告】按钮
			// 	if (detail && detail.isEnded) {
			// 		// 正常播放结束
			// 		console.log("onadclose--->" + detail.isEnded);
			// 	} else {
			// 		// 播放中途退出
			// 		console.log("onadclose--->" + detail.isEnded);
			// 	}
			// },
			// onaderror(e) {
			// 	// 广告加载失败
			// 	console.log("onaderror: ", e.detail);
			// },




			getUserList() {
				getWinningNotification().then(res => {
					if (res.status == 200) {
						this.userSignList = res.data
					}

				})
			},
			close() {
				this.isPrize = false
				this.isShow = false
				console.log('this.isPrize',this.isPrize,this.isShow)
			},
			receive() {
				if (this.data.prizeType == 1 && !this.addressInfo.id) return uni.showToast({
					title: "请选择收货地址",
					icon: "none",
				});
				console.log("reward")
				reward({
					addressId: this.data.prizeType == 1 ? this.addressInfo.id : '',
					id: this.data.yxSystemWinningRecord.id
				}).then(res => {
					console.log(res)
					this.close()
					if (res.status == 200) {
						uni.showToast({
							title: "领取成功",
							icon: "success",
							duration: 2000
						});
					}
				}).catch(res => {
					this.close()
					uni.showToast({
						title: res.msg,
						icon: "none",
					});
				})
			},
			goRecords() {
				this.$yrouter.push({
					path: '/userPack/pages/user/Records/index',
				})
			},
			share() {
				this.$refs.customUniPopup.open()
			},
			addressTap: function() {
				this.showAddress = true;
				if (!this.addressLoaded) {
					this.addressLoaded = true;
					this.$refs.mychild.getAddressList();
				}
			},
			changeAddress(addressInfo) {
				this.addressInfo = addressInfo;
				console.log('this.addressInfo', this.addressInfo)
			},
			addressRedirect() {
				this.addressLoaded = false;
				this.showAddress = false;
			},
			// 结果处理
			prizedrawCb(data) {
				this.percentage = uni.$u.range(0, 100, 100)
				setTimeout(() => {
					this.percentage = uni.$u.range(0, 100, 0)
					this.data = data || {
						// 0 不中奖 1 实物 2优惠券 3零钱
						prizeType: 0,
						prizeName: ``, // 奖品名称
						prizeDescription: ``, // 奖品描述
						wayReceiving: ``, // 兑换方式
						validity: ``, // 有效期
						specialSpecification: ``, // 特殊说明
						prizeImage: `` // 奖品图片

					}
					this.isPrize = true
					this.$store.dispatch("userInfo", true);

				}, 500)
			},
			prizedraw() {
				this.percentage = uni.$u.range(0, 100, this.percentage + 10)
				prizedraw().then(res => {
					this.prizedrawCb(res.data)
				}).catch(error => {
					this.prizedrawCb(error.data.data)
					/**
					 * 抽奖次数不足
					 **/
					// PRIZEDRAW_NUM_EXCEPTION(5110, "抽奖次数不足"),
					/**
					 * 未中奖
					 **/
					// LOSING_LOTTERY_EXCEPTION(5111, "未中奖"),
					/**
					 * 抽奖异常
					 **/
					// PRIZE_DRAW_EXCEPTION(5111, "抽奖异常"),
					// uni.showToast({
					// 	title: error.msg,
					// 	icon: "none",
					// 	duration: 1500,
					// });
				})
			},
			btnBClick() {
				if (!this.userInfo.drawsNumber) return uni.showToast({
					title: "抽奖次数不足",
					icon: "none"
				});
				this.isShow = true
				uni.$u.throttle(this.prizedraw, 500)
				// uni.$u.debounce(this.prizedraw, 500)
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '号外！号外！亿久生活上线啦~',
				path: `/pages/Loading/index?scene=${this.userInfo.uid}`,
				imageUrl: 'https://qny.yijiumy.com/ydd/20240328191610.png',
				channel: 'Wxfriends' // Wxfriends Wxmoments
			}
		},
		// 本接口为 Beta 版本，暂只在 Android 平台支持，iOS平台有的机型支持有的不支持
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '号外！号外！亿久生活上线啦~',
				path: `/pages/Loading/index?scene=${this.userInfo.uid}`
			}
		}
	}
</script>

<style lang="less" scoped>
	.lamp {
		height: 550rpx;
		width: 85%;
		// background-color: red;
		position: absolute;
		left: 7.5%;
		top: 533rpx;
		display: flex;
		justify-content: space-between;

		.lamp-box1 {
			view:nth-child(2n+1) {
				animation: singular 1.5s ease-in-out infinite;
			}

			view:nth-child(2n) {
				animation: Complex 1.5s ease-in-out infinite;
			}
		}

		.lamp-box2 {
			view:nth-child(2n) {
				animation: singular 1.5s ease-in-out infinite;
			}

			view:nth-child(2n+1) {
				animation: Complex 1.5s ease-in-out infinite;
			}
		}

		>view {
			width: 35rpx;
			height: 550rpx;



			>view {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				margin: 58rpx auto;
				box-shadow: #fff 0;
				box-shadow: #fff 0 0 5rpx;
			}
		}
	}

	@keyframes singular {
		0% {
			background: rgba(255, 163, 119, 0.3);
			// box-shadow: #ddc644;
		}

		33.3% {
			background: rgb(255, 212, 104);
			// box-shadow: #c54017;
		}

		66.6% {
			background: rgb(252, 255, 208);
			// box-shadow: #a30ab1;
		}
	}

	100% {
		background: rgba(255, 163, 119, 0.3);
		// box-shadow: #ddc644;
	}

	@keyframes Complex {
		0% {
			background: rgb(255, 212, 104);
			// box-shadow: #c54017;

		}

		33.3% {
			background: rgb(252, 255, 208);
			// box-shadow: #a30ab1;
		}

		66.6% {
			background: rgba(255, 163, 119, 0.3);
			// box-shadow: #ddc644;
		}

		100% {
			background: rgb(255, 212, 104);
			// box-shadow: #c54017;

		}
	}


	.warp {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 520rpx;
		margin-left: -260rpx;
		text-align: center;
	}

	.box2 {
		position: absolute;
		opacity: 0;
		/* 初始状态透明 */
		animation: fadeInOut 0.5s ease forwards;
		/* 使用动画 */
	}

	@keyframes fadeInOut {
		0% {
			opacity: 0;
			transform: scale(0);
		}

		80% {
			opacity: 1;
			transform: scale(1.2);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}



	.main {

		.back-img {
			width: 100%;
			height: 1980rpx;
		}

		.link {
			position: absolute;
			top: 0rpx;
			right: 0;
			padding: 20rpx;
		}

		.pic-back {
			height: 100vh;
			overflow-x: hidden;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 20;
			background-color: rgba(0, 0, 0, 0.5);

			.prize-box {
				width: 85%;

				left: 7.5%;
				position: absolute;

				padding: 0 3%;

				.coupon {
					width: 374.4rpx;
					height: 450rpx;
					margin: auto;
					position: relative;

					.coupon-box {
						position: absolute;
						height: 338.16rpx;
						top: 0px;
						width: 100%;
						text-align: center;
						padding: 30rpx;

						.text {
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 12px;
							color: #000000;
							line-height: 22rpx;
							margin: 30rpx 0 0;
						}

						.coupon-numder {
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 42px;
							color: #9f2b45;
							margin-bottom: 62rpx;
						}

						.type {
							color: #fff;
							font-size: 12px;
						}
					}

					image {
						width: 374.4rpx;
						height: 338.16rpx;
					}
				}

				.hongbao {
					width: 280rpx;
					height: 450rpx;
					margin: auto;
					position: relative;

					.hongbao-numder {
						position: absolute;
						top: 65rpx;
						width: 100%;
						text-align: center;
						font-size: 27px;
						color: rgb(236, 102, 45);

					}

					image {
						width: 280rpx;
						height: 380rpx;
					}
				}

				.once {
					width: 400rpx;
					height: 110rpx;
					margin: auto;
					background-size: cover;
					position: relative;
					text-align: center;

					.img {
						img {
							width: 400rpx;
							height: 110rpx;
						}

						width: 400rpx;
						height: 110rpx;
						position: absolute;
						top: 0px;
					}

					text {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 26px;
						color: #333333;
						line-height: 33rpx;
						position: relative;
						text-align: center;
						background: linear-gradient(180deg, #FF8321 0%, #FF632A 99.6337890625%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						position: relative;
						z-index: 2;
						line-height: 100rpx;

					}
				}

				.address {
					height: 250rpx;
					width: 100%;
					margin-bottom: 85rpx;

					.address-details {
						display: flex;
						justify-content: space-between;
						color: rgba(60, 60, 60, 0.7);
						font-size: 14px;

						.addressInfo {
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							width: 260rpx;
						}

						.realName {
							width: 130rpx;
							text-align: center;
						}

						.phone {
							width: 170rpx;
						}
					}

					.font {
						font-size: 30rpx;
						line-height: 28px;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						width: 550rpx;
					}

					.push {
						width: 60rpx;
						height: 60rpx;
					}

					.border-box {
						width: 100%;
						height: 180rpx;
						border: 1rpx #000 dashed;
						border-radius: 20rpx;
						display: flex;
						justify-content: space-around;
						align-items: center;

					}

				}

				.prize-img {
					width: 306rpx;
					height: 306rpx;
					background: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: auto;
					margin-bottom: 50rpx;

					image {
						width: 229rpx;
						height: 251rpx;
					}

					text-align: center;
				}

				.prize-name {
					text-align: center;
					line-height: 80rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 14px;
					color: #9f2b45;
				}
			}
		}

		.numder {
			position: absolute;
			top: 1046rpx;
			font-size: 12px;
			text-align: center;
			width: 281rpx;
			height: 41rpx;
			line-height: 41rpx;
			left: calc((100% - 281rpx) / 2);
			background: linear-gradient(180deg, #FFDF89, #FCF4BC);
			border-radius: 21rpx;

			text {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 12px;
				color: #FFFFFF;
				background: linear-gradient(180deg, #FF8321 0%, #FF632A 99.6337890625%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.box {
			width: 66%;
			height: 420rpx;
			position: absolute;
			top: 604rpx;
			left: 17%;
			display: flex;
			padding: 1%;
			justify-content: space-between;
			flex-wrap: wrap;

			image {
				width: 32%;
				height: 32%;
			}

			// 264 225 rpx
		}

		.title-box {
			width: 100%;
			// height: 420rpx;
			position: absolute;
			top: 1570rpx;
			padding: 0 7.5%;
			background: url(https://qny.yijiumy.com/pic_1px.png) repeat-y;
			background-size: 100%;
			background-attachment: fixed;
			background-position: center;

			.rule {
				width: 100%;
				margin: auto;

				.rule-title {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 15px;
					color: #FFFFFF;
					line-height: 20px;
					margin-bottom: 18rpx;

				}

				.rule-list {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 12px;
					color: #FFFFFF;
					line-height: 16px;
					margin-bottom: 15rpx;
				}
			}
		}

		.seamless-box {
			width: 95%;
			// height: 420rpx;
			position: absolute;
			top: 1220rpx;
			left: 2.5%;



			.btn {
				.btn-text {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 18px;
					color: #FFFFFF;
					background: linear-gradient(180deg, #FF8321 0%, #FF632A 99.6337890625%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				height: 82rpx;
				background: linear-gradient(180deg, #FFDF89, #FCF4BC);
				border-radius: 41rpx;
				text-align: center;
				line-height: 82rpx;
				width: 90%;
				margin: 0 auto 36rpx;


			}
		}
	}
</style>